<template>
    <el-aside width="200px">
        <!-- active-text-color 选中的文字颜色-->
        <!-- background-color 背景颜色-->
        <!-- default-active="1" 默认激活的选项-->
        <el-menu active-text-color="#409eff" background-color="#001529" class="el-menu-vertical-demo" default-active="1"
            text-color="#fff" @open="handleOpen" @close="handleClose">
            <el-menu-item>
                <!-- 原生标签直接引入 本地地址 -->
                <!-- <img src="@/assets/vue.svg" alt="" /> -->
                <!-- 封装的组件是动态导入的，必须import的形式引入-并且挂载到data里面 -->
                <el-image :src="url" class="logo"></el-image>
                <!-- <el-image
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
          ></el-image> -->
                <span>考试管理系统</span>
            </el-menu-item>
            <template v-for="(item, index) in menuArr" :key="index">
                <el-sub-menu v-if="item.children" :index="item.path">
                    <template #title>
                        <span>
                            {{ item.title }}
                        </span>
                    </template>
                    <el-menu-item v-for="(v, i) in item.children" :key="i" :index="v.path">
                        <span>{{ v.title }}</span>
                    </el-menu-item>
                </el-sub-menu>
                <el-menu-item v-else :index="item.path">
                    <span>{{ item.title }}</span>
                </el-menu-item>
            </template>
        </el-menu>

    </el-aside>
</template>
<script>
import url from "@/assets/vue.svg";
import menuArr from "@/router/menu";
export default {
    data() {
        return {
            url,
            // menuList,
            menuArr,
            username: "zhangsan",
        };
    },
    methods: {
        handleOpen() { },
        handleClose() { },
        menuClick(v) {
            console.log(v);
            this.$router.push({ name: v.name });
        },
    },
};
</script>

<style lang="scss" scoped>
.el-menu {
    height: 100vh;

    .logo {
        width: 35px;
        height: 35px;
        margin-right: 10px;
    }
}
</style>
